<template>
  <view class="px-2 box-border">
    <view class="mt-2.5">
      <personalModule
        :height="208"
        :leftWidth="165"
        showStatus
        :statusName="userInfo.statusName"
        :statusBgColor="userInfo.statusName == '不在岗' ? '#BBBBBB' : '#33A954'"
        :contentStyle="{ padding: '40rpx 16rpx', 'align-items': 'center' }"
      >
        <template #left>
          <up-avatar
            :src="userInfo.avatar"
            shape="circle"
            size="125rpx"
            mode="scaleToFit"
          ></up-avatar>
        </template>
        <template #right>
          <view
            class="right flex flex-col justify-around ml-2 text-[28rpx] color-black h-[100%]"
            style="width: calc(100% - 165rpx - 16rpx)"
          >
            <view class="flex flex-row items-center">
              <text class="font-bold">{{ userInfo.userName }}</text>
              <text class="mx-4">{{ userInfo.badgeNumber }}</text>
            </view>
            <text>{{ userInfo.phonenumber }}</text>
          </view>
        </template>
      </personalModule>
    </view>
    <view
      class="mt-2.5 part-box pl-2.5 pr-1 py-3.5 box-border h-[97rpx] flex flex-row justify-between"
      @click="colckRecord"
    >
      <text>打卡记录</text>
      <view>
        <up-text
          suffixIcon="arrow-right"
          :iconStyle="{ color: '#000', fontSize: '32rpx' }"
          :text="`本月打卡${clockCount}天`"
          color="#000000"
          size="32rpx"
        ></up-text>
      </view>
    </view>
    <button
      class="rounded-2 bg-white color-[#038AFE] border-[#038AFE] h-[83rpx] leading-[83rpx] text-[33rpx] absolute bottom-[56rpx]"
      style="border: 1px solid #038afe; width: calc(100% - 32rpx)"
      @click="showModal = true"
    >
      退出登录
    </button>
    <up-modal
      :show="showModal"
      title="确定退出登录？"
      content="退出后部分功能将无法正常使用"
      contentTextAlign="center"
    >
      <template #confirmButton>
        <view class="flex flex-row justify-between item-center">
          <view class="w-[35%]">
            <up-button
              type="info"
              hairline
              text="取消"
              @click="showModal = false"
            ></up-button>
          </view>
          <view class="w-[35%]">
            <up-button
              type="primary"
              hairline
              text="确定退出"
              @click="userInfoStore.logout"
            ></up-button>
          </view>
        </view>
      </template>
    </up-modal>
    <up-toast ref="uToastRef"></up-toast>
  </view>
</template>

<script setup lang="ts">
import norAvatar from "@/static/icon/avatar.png";
import { policeUserInfo } from "@/api/user";
import { clockStat } from "@/api/police/clock";
import { imgPrefix } from "@/config/app";
import { useUserInfoStore } from "@/stores/userInfo";
const userInfoStore = useUserInfoStore();

const uToastRef = <any>ref(null);
const userInfo = <any>ref({});
const showModal = ref(false);
const clockCount = ref(0);
// 获取个人信息
const getUserInfo = () => {
  policeUserInfo({ policeUserId: userInfoStore.userInfo.userId })
    .then((res) => {
      const { data } = res;
      data.avatar = imgPrefix + data.avatar;
      if (data.dutyStatus == 3) {
        data.statusName = "不在岗";
      } else {
        data.statusName = "在岗";
      }
      userInfo.value = data;
    })
    .catch((err) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 获取打卡统计
const getClockStat = () => {
  clockStat({ policeUserId: userInfoStore.userInfo.userId })
    .then((res) => {
      const { data } = res;
      clockCount.value = data.clockMonthDayCount;
    })
    .catch((err) => {
      uToastRef.value.show({
        type: "error",
        message: err,
      });
    });
};
// 查看打卡记录
const colckRecord = (item: any) => {
  console.log(item);
  uni.navigateTo({
    url: `/subPages/police/clock/clockRecord?userId=${userInfoStore.userInfo.userId}`,
  });
};

onLoad(() => {
  getUserInfo();
  getClockStat();
});
</script>

<style lang="scss" scoped>
.individual-center {
  .business-menu {
    width: 100%;
    .business-item {
      height: 140rpx;
      box-shadow: 0rpx 2rpx 4rpx 1rpx rgba(0, 0, 0, 0.16);
      text-align: center;
    }
  }
}
</style>
